Next.js এ, আপনি সহজেই পেজের Meta Tags এবং Title সেট করতে পারেন যা SEO (Search Engine Optimization) এবং সোশ্যাল মিডিয়া শেয়ারিং এর জন্য গুরুত্বপূর্ণ। এটি করার জন্য, Next.js আপনাকে next/head কম্পোনেন্ট প্রদান করে, যা HTML <head> সেকশনে ডাইনামিকভাবে তথ্য যোগ করার অনুমতি দেয়।
নিচে Meta Tags এবং Title সেট করার পদ্ধতি সম্পর্কে বিস্তারিত আলোচনা করা হলো।
১. next/head ব্যবহার করা
Next.js এর next/head কম্পোনেন্টটি ব্যবহার করে আপনি পেজের <head> সেকশনে Meta Tags, Title, এবং অন্যান্য মেটাডেটা যোগ করতে পারবেন। এটি প্রতিটি পেজে আলাদা আলাদা মেটাডেটা কনফিগার করার সুযোগ দেয়।
উদাহরণ:
// pages/index.js
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>My Next.js Website</title>
<meta name="description" content="This is a description of my Next.js site." />
<meta name="keywords" content="Next.js, React, SEO, Web Development" />
<meta name="author" content="Your Name" />
<meta property="og:title" content="My Next.js Website" />
<meta property="og:description" content="This is a description of my Next.js site." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Next.js Website" />
<meta name="twitter:description" content="This is a description of my Next.js site." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
</Head>
<h1>Welcome to My Next.js Website</h1>
</div>
)
}
ব্যাখ্যা:
<title>: পেজের শিরোনাম সেট করে। এটি ব্রাউজারের ট্যাব এবং সার্চ রেজাল্টে দেখা যায়।- Meta Tags:
<meta name="description" />এবং<meta name="keywords" />এর মাধ্যমে SEO সম্পর্কিত ডেটা যেমন ডেসক্রিপশন এবং কিওয়ার্ডস সংজ্ঞায়িত করা হয়। - Open Graph Tags (OG Tags):
<meta property="og:title" />,<meta property="og:description" />ইত্যাদি সোশ্যাল মিডিয়াতে লিঙ্ক শেয়ার করার সময় প্রিভিউ প্রদর্শন করতে সাহায্য করে। - Twitter Cards:
<meta name="twitter:card" />এবং অন্যান্য টুইটার সংশ্লিষ্ট ট্যাগ সোশ্যাল মিডিয়াতে টুইটার প্রিভিউ কাস্টমাইজ করতে ব্যবহৃত হয়।
২. ডাইনামিক Title এবং Meta Tags
Next.js তে আপনি বিভিন্ন পেজের জন্য ডাইনামিকভাবে Title এবং Meta Tags কনফিগার করতে পারেন। উদাহরণস্বরূপ, আপনি ব্লগ পেজে প্রতিটি পোস্টের জন্য আলাদা Title এবং Meta Description সেট করতে পারেন।
উদাহরণ:
// pages/posts/[id].js
import Head from 'next/head'
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
const post = await res.json()
return {
props: {
post,
},
}
}
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res.json()
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}))
return { paths, fallback: false }
}
export default function Post({ post }) {
return (
<div>
<Head>
<title>{post.title}</title>
<meta name="description" content={post.body.slice(0, 150)} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.body.slice(0, 150)} />
</Head>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
)
}
ব্যাখ্যা:
getStaticPropsএবংgetStaticPathsএর মাধ্যমে ব্লগ পোস্টের ডেটা ফেচ করা হয়।<title>{post.title}</title>এবং<meta name="description" content={post.body.slice(0, 150)} />ব্যবহার করে প্রতিটি পোস্টের জন্য আলাদা Title এবং Description তৈরি করা হয়।
৩. Custom Meta Tags
Next.js এ আপনি সহজেই কাস্টম মেটা ট্যাগ যেমন ফেভিকন, আইকন, এবং অন্যান্য মেটা ডেটাও যোগ করতে পারেন।
উদাহরণ:
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#000000" />
<meta name="robots" content="index, follow" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
ব্যাখ্যা:
<link rel="icon" href="/favicon.ico" />: ওয়েবসাইটের ফেভিকন আইকন সেট করা হয়।<meta name="theme-color" content="#000000" />: ব্রাউজারের টুলবারের থিম কালার নির্ধারণ করা হয়।<meta name="robots" content="index, follow" />: রোবটদের জন্য নির্দেশনা দেওয়া হয়, যাতে তারা পেজটি ইন্ডেক্স করতে পারে এবং লিঙ্কগুলো অনুসরণ করতে পারে।
সারাংশ
Next.js এ next/head কম্পোনেন্ট ব্যবহার করে আপনি সহজেই পেজের Meta Tags এবং Title কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি SEO এবং সোশ্যাল মিডিয়া শেয়ারিং এর জন্য প্রয়োজনীয় মেটাডেটা সেট করতে পারবেন, যা আপনার ওয়েবসাইটের ভিজিবিলিটি এবং পারফরম্যান্স উন্নত করতে সাহায্য করবে।
Read more
